import React, { Component } from 'react';
import styled from 'styled-components/native';
import { FlatList } from 'react-native';

import SearchView from '../../components/messages/SearchView';
import ChatConversationItem from '../../components/messages/ChatConversationItem';

import { colors } from '../../utils/constants';
import { conversations } from '../../../test/ChatMocker';

const Root = styled.View`
  width: 100%;
  height: 100%;
  backgroundColor: ${colors.BACKGROUND};
`;

class ChatConversationView extends Component {

  _renderItem = ({ item, index }) => <ChatConversationItem {...item} isLast={index === conversations.length - 1} />

  render() {
    return (
      <Root>
        <FlatList
          data={conversations}
          keyExtractor={item => item._id}
          renderItem={this._renderItem}
          ListHeaderComponent={<SearchView />}
        />
      </Root>
    );
  }
}

export default ChatConversationView;
